<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 全局、局部组件注册</title>
</head>
<style>
    .template{
        margin: 5% 10%;
    }
</style>
<body>
<div id="app">
    <div class="template">
        <html-component1></html-component1>
        <html-component2></html-component2>
    </div>
</div>

<script src="../js/vue.js"></script>
<script>

    const message = {
        text:'请输入身份号',
    };

    // const vue_extend = Vue.extend({
    //     template:`
    //     <div>
    //         <h3>
    //            组件注册
    //         </h3>
    //         <p>组件注册</p>
    //     </div>
    //     `
    // });
    const vue_extend = {
        template:`
        <div>
            <h3>
               组件注册
            </h3>
            <p>组件注册</p>
        </div>
        `
    }
    // Vue.component('html-component', vue_extend)
    //数据冻结, 禁止调试
    //Object.freeze(message)

    const demo = new Vue({
        el: '#app',
        data: message,
        methods: {

        },
        computed: {},
        components:{
            'html-component1' : vue_extend,
            'html-component2' : vue_extend,
        }
    });
</script>
</body>
</html>